<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>报废申请信息查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
    <div class="data-manage-table">
        <template>
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
                <el-form-item label="申请编号">
                    <el-input placeholder="请输入申请编号" v-model="searchapply.applyId1"></el-input>
                </el-form-item>
                <el-form-item label="血液ID">
                    <el-input placeholder="请输入血液ID" v-model="searchapply.bloodId"></el-input>
                </el-form-item>
                <el-form-item label="报废原因">
                    <el-select v-model="searchapply.scrap_reason">
                        <el-option v-for="item in blooddiscardreasonlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryload">搜索</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                    <el-button v-permission="'certificate:delete'" type="danger" @click="batchDelete">批量删除</el-button>
                </el-form-item>
            </el-form>

            <el-dialog title="修改申请" center :visible.sync="dialogFormVisible" width="1000px" @close="cancel">
                <!-- 内容的主体区域 -->
                <el-descriptions :content-style="rowCenter" :label-style="rowCenter" class="margin-top" :column="3" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            申请编号:
                        </template>
                        {{describeform.applyId}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血装编号条码:
                        </template>
                        {{describeform.barcode}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血液ID:
                        </template>
                        {{describeform.bloodId}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血液成分:
                        </template>
                        {{describeform.bloodComponent}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            ABO血型:
                        </template>
                        {{describeform.aboBloodType}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            RH血型:
                        </template>
                        {{describeform.rhBloodType}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血量:
                        </template>
                        {{describeform.bloodCount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            计量单位:
                        </template>
                        {{describeform.measurementUnit}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血液来源:
                        </template>
                        {{describeform.bloodSource}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血液金额:
                        </template>
                        {{describeform.bloodAmount}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            报废原因:
                        </template>
                        <el-select v-model="form.scrapReason">
                            <el-option v-for="item in blooddiscardreasonlist" :key="item.code" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                </el-descriptions>
<!--                <el-form ref="form" :model="form"  label-width="120px" :label-position="labelPosition">-->
<!--&lt;!&ndash;                    <el-form-item label="申请编号" prop="applyId" >&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.applyId" readonly ></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血液ID" prop="bloodId">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.bloodId" readonly ></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血装编号条码">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.barcode" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血液成分">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.bloodComponent" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="ABO血型">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.aboBloodType" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="RH血型">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.rhBloodType" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血液金额">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.bloodAmount" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血液来源">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.bloodSource" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="血量">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.bloodCount" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="计量单位">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="form.measurementUnit" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--                    <el-form-item label="报废原因" prop="scrapReason">-->
<!--                        <el-select v-model="form.scrapReason">-->
<!--                            <el-option v-for="item in blooddiscardreasonlist" :key="item.code" :label="item.name"-->
<!--                                :value="item.code">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="update">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </span>
            </el-dialog>
            <el-table ref="updateform" :data="tableData" style="width: 100%" border
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="" >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="applyId" label="报废申请编号" width="150" align="center">
                </el-table-column>
                <el-table-column prop="bloodId" label="血液id" width="150" align="center">
                </el-table-column>
                <el-table-column prop="scrapReason" label="报废原因" width="180" align="center">
                    <template slot-scope="scope">
                        {{ getblooddiscardreasonName(scope.row.scrapReason) }}
                    </template>
                </el-table-column>
                <el-table-column prop="barcode" label="血装编号条码" width="150" align="center"></el-table-column>
                <el-table-column prop="bloodComponent" label="血液成分" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getBloodComponentName(scope.row.bloodComponent) }}
                    </template>
                </el-table-column>
                <el-table-column prop="aboBloodType" label="ABO血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getAboBloodName(scope.row.aboBloodType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="rhBloodType" label="RH血型" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getRhBloodName(scope.row.rhBloodType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="bloodAmount" label="血液金额" width="80" align="center"></el-table-column>
                <el-table-column prop="bloodSource" label="血液来源" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getBloodSourceName(scope.row.bloodSource) }}
                    </template>
                </el-table-column>
                <el-table-column prop="bloodCount" label="规格" width="100" align="center">
                    <template slot-scope="scope">
                        {{ getBloodSizeName(scope.row.bloodCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="measurementUnit" label="计量单位" width="100" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180" align="left">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="mini" type="danger"  @click="del(scope.row.id)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="text-align: center; margin-top: 20px;"/>
        </template>
    </div>

    <script src="/plugins/vue-2.6.11/vue.js"></script>
    <script src="/js/jquery.min.js"></script>
    <!--    <script src="../plugins/element-2.4.5/index.js"></script>-->
    <script src="/js/2.15.12/index.js"></script>
    <link href="/css/2.15.12/index.min.css" rel="stylesheet">
    <script src="/js/httpVueLoader.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/plugins/axios-0.27.2/axios.min.js"></script>


    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script>
        (function () {
            let urlBase = "/discard"
            var vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        // 描述列表文字居中
                        rowCenter:{
                            "text-align":"center"
                        },
                        size: '',
                        pageNum: 1,
                        pageSize: 1,
                        total: 0,
                        //血液状态列表
                        stateList : [],

                        //ABO血型列表
                        aboBloodTypeList : [],

                        //Rh血型列表
                        rhBloodTypeList : [],

                        //血液成分列表
                        bloodComponentList : [],

                        // 血量列表
                        bloodSizeList : [],

                        //血液位置列表
                        bloodLocationList : [],

                        //血液来源列表
                        bloodSourceList : [],
                        //报废原因选择
                        blooddiscardreasonlist: [],
                        //状态选择
                        stateselect: [],
                        //批量删除
                        multipleSelection: [],
                        //弹出框显示
                        form:{},
                        dialogVisible: false,
                        dialogFormVisible:false,
                        //搜索样本信息
                        searchapply: {
                            applyId1:'',//申请编号
                            number:'',//血液id
                            scrap_reason:'',//报废原因
                        },
                        //描述列表转化表格
                        describeform:{},
                        //表格信息
                        tableData: [],
                        labelPosition: 'right',
                        //新增样本信息
                        addForm: {
                            A_blood_sample_number: '',
                            Blood_number: '',
                            state: '',
                            The_sample_location: '',
                            Operation_of: '',
                            Operating_manual: ''
                        },
                        //新增样本表单验证
                        addFormRules: {
                            A_blood_sample_number: [
                                { required: true, message: '请输入样本编号', trigger: 'blur' },
                            ],
                            Blood_number: [
                                { required: true, message: '请输入血液编号', trigger: 'blur' },
                            ],
                            state: [
                                { required: true, message: '请选择样本状态', trigger: 'change' },
                            ],
                            The_sample_location: [
                                { required: true, message: '请选择样本位置', trigger: 'change' },
                            ],
                            Operation_of: [
                                { required: true, message: '请输入操作人', trigger: 'blur' },
                            ],
                            Operating_manual: [
                                { required: true, message: '请输入操作人工号', trigger: 'blur' },
                            ]
                        }
                    }
                },
                created(){
                    this.load();
                    this.format1();

                },
                mounted() {
                    this.getBloodLocation();
                    this.getBloodSize();
                    this.getBloodSource();
                    this.getAboBloodType();
                    this.getRhBloodType();
                    this.getBloodComponent();
                    this.getBloodDiscardReason();

                },
                methods: {
                    //分页查询
                    load() {
                        axios.get(urlBase+"/normal/page",{
                        params: {
                            pageNum: this.pageNum,
                            pageSize: this.pageSize,
                        }
                    }).then(res => {
                        console.log(this.pageNum)
                        console.log(res)
                        console.log(this.pageSize)
                        this.tableData = res.data.records
                        this.total = res.data.total
                    })

                    },//查询
                    queryload(){
                        axios.get('/discard/normal/querypage',{
                            params: {
                                pageNum: this.pageNum,
                                pageSize: this.pageSize,
                                applyId1: this.searchapply.applyId1,
                                bloodId: this.searchapply.bloodId,
                                scrap_reason: this.searchapply.scrap_reason,
                            }
                        }).then(res => {
                            console.log(res)
                            console.log("----------------------")
                            this.tableData = res.data.records
                            this.total = res.data.total

                        })
                    },
                    // 获取报废原因字典
                    getBloodDiscardReason(){
                        axios.get('/bloodDiscardReason/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.blooddiscardreasonlist = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中报废原因字段的code转换成name
                    getblooddiscardreasonName(code){
                        for (var i = 0; i < this.blooddiscardreasonlist.length; i++) {
                            if (this.blooddiscardreasonlist[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.blooddiscardreasonlist[i].name;
                            }
                        }
                    },
                    update(){
                        axios.put(urlBase+"/normal/simpleupdate", this.form).then(res => {
                            if (res) {
                                this.$notify({
                                    title:'成功',
                                    message:'保存成功',
                                    type:'success'
                                })
                                this.$message.success("保存成功")
                                this.dialogFormVisible = false
                                this.load()
                            } else {
                                this.$message.error("保存失败")
                            }
                        })
                    },
                    del(id) {
                        this.$confirm('确定删除这条数据吗, 是否继续?', '删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.delete("/discard/normal/" + id).then(res => {
                                if (res) {
                                    this.$notify({
                                        title:'成功',
                                        message:'删除成功',
                                        type:'success'
                                    })
                                    this.$message.success("删除成功")
                                    this.load()
                                } else {
                                    this.$message.error("删除失败")
                                }
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });

                    },
                    handleSizeChange(pageSize) {
                        this.pageSize = pageSize;
                        console.log(pageSize)
                        this.load();
                    },
                    handleCurrentChange (pageNum) {
                        this.pageNum = pageNum;
                        console.log(pageNum)
                        this.load();
                    },
                    handleEdit(index, row) {
                        console.log(index, row);
                        this.form=row

                        this.describeform.applyId = row.applyId
                        this.describeform.barcode = row.barcode
                        this.describeform.bloodId = row.bloodId
                        this.describeform.bloodComponent = this.getBloodComponentName(row.bloodComponent);
                        this.describeform.aboBloodType = this.getAboBloodName(row.aboBloodType);
                        this.describeform.rhBloodType = this.getRhBloodName(row.rhBloodType);
                        this.describeform.bloodCount = this.getBloodSizeName(row.bloodCount);
                        this.describeform.measurementUnit = row.measurementUnit;
                        this.describeform.bloodSource = this.getBloodSourceName(row.bloodSource);
                        this.describeform.bloodAmount = row.bloodAmount;
                        this.dialogFormVisible = true
                    },
                    handleDelete(index, row) {
                        console.log(index, row);
                    },
                    reset(){
                        this.searchapply.applyId1 = ""
                        this.searchapply.scrap_reason=""
                        this.searchapply.bloodId=""
                        this.load()
                    },
                    //取消按钮
                    cancel(){
                        this.dialogVisible = false
                    },
                    // 获取rh血型字典
                    getRhBloodType(){
                        axios.get('/rhType/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.rhBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中rhType字段的code转换成name
                    getRhBloodName(code){
                        for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                            if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.rhBloodTypeList[i].name;
                            }
                        }
                    },

                    // 获取abo血型字典
                    getAboBloodType(){
                        axios.get('/aboType/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.aboBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中aboBloodType字段的code转换成name
                    getAboBloodName(code){
                        for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                            if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.aboBloodTypeList[i].name;
                            }
                        }
                    },

                    // 获取血液来源字典
                    getBloodSource(){
                        axios.get('/bloodSource/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodSourceList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中aboBloodType字段的code转换成name
                    getBloodSourceName(code){
                        for (var i = 0; i < this.bloodSourceList.length; i++) {
                            if (this.bloodSourceList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSourceList[i].source;
                            }
                        }
                    },

                    // 获取血量字典
                    getBloodSize(){
                        axios.get('/bloodSize/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodSizeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodCount字段的code转换成size
                    getBloodSizeName(code){
                        for (var i = 0; i < this.bloodSizeList.length; i++) {
                            if (this.bloodSizeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSizeList[i].size;
                            }
                        }
                    },

                    // 获取血液成分字典
                    getBloodComponent(){
                        axios.get('/bloodComposition/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodComponentList = res.data.data
                                    console.log(this.bloodComponentList)
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodComponent字段的code转换成name
                    getBloodComponentName(code){
                        for (var i = 0; i < this.bloodComponentList.length; i++) {
                            if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodComponentList[i].composition;
                            }
                        }
                    },
                    // 获取血液位置字典
                    getBloodLocation(){
                        axios.get('/bloodLocation/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodLocationList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },
                    // 将表格中bloodLocation字段的code转换成name
                    getBloodLocationName(code){
                        for (var i = 0; i < this.bloodLocationList.length; i++) {
                            if (this.bloodLocationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodLocationList[i].location;
                            }
                        }
                    },
                    //批量删除
                    // handleSelectionChange(selection) {
                    //     this.multipleSelection = selection;
                    //     console.log(this.multipleSelection)
                    //     let ids = this.multipleSelection.map(item => item.id)
                    //     console.log(ids)
                    // },
                    //批量删除
                    batchDelete() {
                        if(JSON.parse(JSON.stringify(this.$refs.updateform.selection)).length==0){
                            this.$notify({
                                title: '温馨提示：',
                                message: '您未选中数据，请重新操作！！！',
                                type: 'warning'
                            });
                            return;
                        }
                        let checkArr = JSON.parse(JSON.stringify(this.$refs.updateform.selection));  // 存储了勾选到的数据
                        var ids=new Array()
                        for(var i=0;i<checkArr.length;i++){
                            ids[i]=checkArr[i].id;
                        }
                        console.log("打印所选编号")
                        console.log(ids)
                        // let data={ids:ids}
                        //批量删除
                        this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/discard/normal/batchDelete',
                                method: 'put',
                                dataType: 'json',
                                data:ids
                            }).then(res => {
                                if (res.data.code === '200') {
                                    this.$notify({
                                        tile: '温馨提示',
                                        message: '批量删除成功！！！',
                                        type: 'success'
                                    })
                                    this.load()
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '删除出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                    },
                    format1() {
                        var _this = this;
                        let yy = new Date().getFullYear();
                        let mm = new Date().getMonth()+1;
                        let dd = new Date().getDate();
                        let hh = new Date().getHours();
                        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                        _this.sendTime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;

                    }, //获取当前时间
                }

            });
        })()
    </script>

</body>

</html>